<div>
		<h1 id="pop_title"><fly:translate name="text_1" /> <fly:modify name="text_1" /> <fly:variable name="video_image_name"/></h1>
		<div class="magic_img_scroll hidden">
			<div class="pointer" id="pointer"></div>
		</div>	
		<div id="form-ligne-location_popup">
			<div id="btn_pre"> <input type="button" id="btn_preview" value="<fly:translate name='button_1' />" /><fly:modify name='button_1' /></div>
			<div id="middle"><input type="text" id="frame_number" size=7 style="height:20px;" onkeypress="return keyEnable(event,'number')"/>  </div>
			<div id="btn_next" style="margin-right:10px;"> <input type="button" id="btn_show_frame" value="<fly:translate name='button_3' />" /><fly:modify name='button_3' /></div>
			<div id="total_frame"><fly:translate name="label_1" /> <fly:modify name="label_1" /> <fly:variable name='all_frame' /></div>
			<div id="btn_select">
				<input type="button" id="btn_save" value="<fly:translate name='button_2' />" class="bouton"/><fly:modify name="button_2" />
				<fly:modify name="error_1" />
				<fly:modify name="error_2" />
				<fly:modify name="text_2" />
			</div>
		</div>	
		<div class="message_info hidden" id="sms_error" style="color:red;font-weight:bold;"></div>
		
		
		
		<div class="list_photos_no_croll">	
			<div class="list_photos">
				<fly:list name='list_photo'>
					<div id="div_frame_<fly:variable name='frame_number' />" class="b_img <fly:variable name='class_selected_image' />" style="height: <fly:variable name='height_out' />px;width: <fly:variable name='width_out' />px;">
						<img class="img_frame" id="img_<fly:variable name='frame_number' />" title="<fly:variable name='title' />" src="<fly:variable name='url_video_photo' />" width="<fly:variable name='width' />px" height="<fly:variable name='height' />px" />
						<div class="photo_title" id="title_<fly:variable name='frame_number' />"><fly:variable name='frame_number' /></div>
					</div>
				</fly:list>
			</div>
		</div>
		<div class="ajax_loading"></div>
		
		<script type="text/javascript">
			var div = '';
			var timeout = null;
			var delay_search = 1000;
			var val ;
			var sFram_pre = 24 ;
			var sFram_next = 24 ;
			var oFram ;
			var frame_start ;
			var all_frame = '<fly:variable name="all_frame"/>' ;
			var id_fichier = '<fly:variable name="id_fichier"/>' ;
			var duration = '<fly:variable name="duration"/>';
			$(document).ready(function(){
				$("#TB_caption_t").html($('h1#pop_title').html());
				$('h1#pop_title').replaceWith('');
				document.onkeyup = function(e){ 	
	          		if(e == null) { // ie
	          			keycode = event.keyCode;
	          		} else { // mozilla
	          			keycode = e.which;
	          		}
	          		if(keycode == 27){ // close	
	          		}
	          	};
	          	$(".b_img").each(function(){
	          		get = $(this).attr("class");
	          		cl = get.split(" ");
	          		if(cl[1] == "media_selected"){
	          			get_id = $("."+cl[1]).attr("id");
	          			num = get_id.split("_");
	          			$('#frame_number').val(num[2]);
	          			if(parseInt(num[2])==1){
			          		$("#btn_preview").attr("disabled","true");
			          		$("input[id='btn_preview']").css({color:'gray',cursor:'auto'});
			          	}
			          	if(parseInt(num[2]) == parseInt(all_frame) || (parseInt(all_frame)-parseInt(num[2]))<=24 ){
			          		$("#btn_show_frame").attr("disabled","true");
			          		$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
			          	}
	          		}
	          	});
	          	$($('#frame_number')).keydown(function(event){
					  if(event.keyCode==13) {
					  	frame_start = $('#frame_number').val();
					  	showFrame(frame_start);
					  }
				});
				$("#frame_number").keyup(function(){
					
					 frame_start = parseInt($('#frame_number').val(),10);
					 if (timeout) clearTimeout(timeout);
						timeout = setTimeout(function(){	
							if(parseInt($("#frame_number").val(),10)>1){ 
								$("#btn_preview").removeAttr("disabled")
								$("input[id='btn_preview']").css({color:'#FFF',cursor:'pointer'});
								
								$("#btn_show_frame").removeAttr("disabled");
								$("input[id='btn_show_frame']").css({color:'#FFF',cursor:'pointer'});
								
								$("#btn_save").removeAttr("disabled");
								$("input[id='btn_save']").css({color:'#FFF',cursor:'pointer'});
							}
							if(parseInt($("#frame_number").val(),10)==0){ 
								$("#btn_save").attr("disabled","true");
								$("input[id='btn_save']").css({color:'gray',cursor:'auto'});
								
								$("#btn_show_frame").attr("disabled","true");
								$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
								
								$("#btn_preview").attr("disabled","true");
								$("input[id='btn_preview']").css({color:'gray',cursor:'auto'});
							}
							if(parseInt(frame_start) >= parseInt(all_frame)){
								$("#btn_show_frame").attr("disabled","true");
								$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
								
								$("#btn_preview").attr("disabled","true");
								$("input[id='btn_preview']").css({color:'gray',cursor:'auto'});
								
								$("#btn_save").attr("disabled","true");
								$("input[id='btn_save']").css({color:'gray',cursor:'auto'});
							}
							/*if(parseInt(frame_start)+8 > parseInt(all_frame) ){
								$("#btn_show_frame").attr("disabled","true");
								$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
							}*/
							if( parseInt(all_frame)-parseInt(frame_start)<=24){
								$("#btn_show_frame").attr("disabled","true");
								$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
							}
							frame_start = parseInt($("#frame_number").val(),10);
							showFrame(frame_start);
						},delay_search);
				});
				$("#btn_preview").click(function(){	
					frame_start = $('#frame_number').val();
					if (timeout) clearTimeout(timeout);
						timeout = setTimeout(function(){
							$("#btn_show_frame").removeAttr("disabled");
							$("input[id='btn_show_frame']").css({color:'#FFF',cursor:'pointer'});
							if(parseInt(frame_start)<= 24  || (parseInt(frame_start)-24) == 1){
								showFrame(1);
								$('#frame_number').val(1);
								$("#btn_preview").attr("disabled","true");
								$("input[id='btn_preview']").css({color:'gray',cursor:'auto'});							
							}
							else{					
								oFram = parseInt(frame_start) - parseInt(sFram_pre) ;
								$('#frame_number').val(oFram);
								showFrame(oFram);
							}
						},delay_search);
									
				});
				$("#btn_show_frame").click(function(){
					frame_start = $('#frame_number').val();
					if (timeout) clearTimeout(timeout);
						timeout = setTimeout(function(){
						
						$("#btn_preview").removeAttr("disabled")
						$("input[id='btn_preview']").css({color:'#FFF',cursor:'pointer'});
						
						oFram = parseInt(frame_start) + parseInt(sFram_next) ;
						$('#frame_number').val(oFram);
						if(($('#frame_number').val()>= parseInt(all_frame))||(parseInt(all_frame)-$('#frame_number').val())<=24 ){
							showFrame($('#frame_number').val());
							$('#frame_number').val(parseInt($('#frame_number').val()));
							$("#btn_show_frame").attr("disabled","true");
							$("input[id='btn_show_frame']").css({color:'gray',cursor:'auto'});
						}
						else{		
							showFrame(oFram);
						}
					},delay_search);
				});
	          	
	          	
	          	$('.b_img').click(function(){
					$('.b_img').removeClass("media_selected");
					$(this).addClass("media_selected");
					$('#selected_frame<fly:variable name="id_fichier"/>').text($('> .photo_title',this).text());
	          	});
	          	
	          	$('#btn_save').click(function(){
	          		$.ajax({
					   type: "POST",
					   url: "<fly:variable name="rep_ajax"/>upload_video_image_save.php",
					   data: "thumbnail_at_frame_number="+$('#selected_frame<fly:variable name="id_fichier"/>').text().trim()+'&id_fichier='+<fly:variable name="id_fichier"/>+'&duration='+<fly:variable name="duration"/>+'&filename=<fly:variable name="video_image_name"/>&base64='+($('.b_img.media_selected > img').attr('src')).replace(/\+/g,'*'),
					   success: function(msg){
					     if(msg=='true'){
					     	$('#img<fly:variable name="id_fichier"/>').attr('src',$('.b_img.media_selected > img').attr('src'));
					     	$('#txt_selected_frame').text($('#selected_frame<fly:variable name="id_fichier"/>').text());
							$('#start_frame<fly:variable name="id_fichier"/>').text($('#selected_frame<fly:variable name="id_fichier"/>').text().trim());
          					$('#img_main').attr('src',$('.b_img.media_selected > img').attr('src'));
		          					
					     	$.jPopup_translate.remove();
					     }else{
							$('#sms_error').text('<fly:translate name="error_1" />').show('fast');
				            if (timeout) clearTimeout(timeout);
								timeout = setTimeout(function(){
				            		$('#sms_error').fadeOut("slow");
				            }, delay_search);
					     }
					   }
					 });
	          	});
			});
			function showFrame(val){	          
		        $('#sms_error').fadeOut("slow");
         			ajaxGetImage(val);          		
				$('.b_img').removeClass("media_selected");
			}
			function ajaxGetImage(frame){		
	          		$.ajax({
					   type: "POST",
					   url: "<fly:variable name="rep_ajax"/>upload_video_image_get.php",
					   data: "frame_start="+frame+
					   		 '&filename=<fly:variable name="filename"/>'+
					   		 '&id_fichier=<fly:variable name="id_fichier"/>'+
					   		 '&all_frame='+all_frame +
					   		 '&text_message=<fly:translate name="text_2"/>',
					   beforeSend: function(){
							ajaxLoading(1);
					   },
					   success: function(data){
					   		ajaxLoading(0);							
				            $(".list_photos").html(data);
					   },
					   error: function(data, textStatus, e){
							$('#sms_error').text('<fly:translate name="error_3" />').show('fast');
				            if (timeout) clearTimeout(timeout);
								timeout = setTimeout(function(){
				            		$('#sms_error').fadeOut("slow");
				            }, delay_search);
					   }
					 });					
			}
		</script>
	</div>
</div>